<template>
  <div style="background-color: #FFFFFF; padding: 20px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="用例" prop="cases">
        <el-select
          style="width: 100%;"
          v-model="optionsCasesId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请选择用例"
          :remote-method="getCasesInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in cases_info"
            :key="index"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="步骤标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="表对象" prop="content_type">
        <el-select
          style="width: 100%;"
          v-model="optionsContentTypeId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入表对象"
          :remote-method="getContentTypeInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in content_type_info"
            :key="index"
            :label="item.table_name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="表数据" prop="object_id">
        <el-select
          style="width: 100%;"
          v-model="optionsObjectId"
          multiple
          filterable
          remote
          :disabled="is_show"
          reserve-keyword
          placeholder="请输入数据"
          :remote-method="getObjectInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in object_info"
            :key="index"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="步骤" prop="sort">
        <el-select v-model="ruleForm.sort" placeholder="请选择步骤" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsSort"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

       <el-form-item label="步骤模板" prop="steps_data_template">
        <el-input v-model="ruleForm.steps_data_template" type="textarea" :autosize="{ minRows: 6}"></el-input>
      </el-form-item>

      <el-form-item label="步骤数据" prop="steps_data">
        <el-input disabled v-model="ruleForm.steps_data" type="textarea" :autosize="{ minRows: 6}"></el-input>
      </el-form-item>

      <el-form-item label="错误信息" prop="error_info">
        <el-input disabled v-model="ruleForm.error_info" type="textarea" :autosize="{ minRows: 6}"></el-input>
      </el-form-item>

      <el-form-item label="执行状态" prop="results">
        <el-select disabled v-model="ruleForm.results" placeholder="请选择" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsResults"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态断言" prop="assert_status">
        <el-select v-model="ruleForm.assert_status" placeholder="请选择" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsAssertStatus"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsCommon"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  export default {
    name: 'AddCasesDetail.vue',
    data() {
      return {

        EditUrl: this.$http.casesDetailURL,  // get编辑的URL
        EditIdStr: 'cases_detail_id',  // 模块id字符串
        pushObjName: 'casesDetail',

        optionsCommon: [],  // 存储CommonChoices实际数据的列表
        optionsTestStatus: [],  // 测试结果
        optionsSort: [],  // 步骤顺序
        optionsResults:[],
        optionsAssertStatus:[],

        // 其它表数据,搜索到的全部数据
        cases_info: [],// 用例明细
        content_type_info: [],  // 表对象
        object_info: [],  // 表数据

        // 编辑和添加选中的数据id
        loading: false,
        optionsCasesId: [],
        optionsContentTypeId: [],
        optionsObjectId: [],

        OBJ_URL: '', // 当前表数据获取url
        is_show: true, // 能否选择数据

        ruleForm: {
          title: '',  //步骤标题
          steps_data_template:'',  // 步骤模板
          steps_data:'',  // 步骤数据
          error_info:'', // 错误信息

          sort: '', // 步骤序号
          cases: '', // 用例id
          content_type: '',//对应表对象
          object_id: '',//表中的数据id
          assert_status:'',
          results:3,
          status: '', //状态

          cases_info: {},
          content_type_info: {},
          content_object_info: {},
        },  //
        rules: {
          title: [
            {required: true, message: '请输入步骤标题', trigger: 'blur'},
          ],
          sort: [
            {required: true, message: '步骤序号', trigger: 'change'}
          ],
          cases: [
            {required: true, message: '请选择用例', trigger: 'change'}
          ],
          module: [
            {required: true, message: '所属模块', trigger: 'change'}
          ],
          content_type: [
            {required: true, message: '对应表对象', trigger: 'blur'},
          ],
          object_id: [
            {required: true, message: '表中的数据', trigger: 'blur'},
          ],
          status: [
            {required: true, message: '请选择状态', trigger: 'change'}
          ],
        }
      };
    },
    created() {
      this.getEditData();   // get回将要编辑的数据
      this.optionsCommon = this.getChoices.common; // 获取标准CHOICES
      this.optionsTestStatus = this.getChoices.test_status;  // 测试结果
      this.optionsSort = this.getChoices.sort;  // 步骤顺序
      this.optionsResults = this.getChoices.results;  // 执行状态
      this.optionsAssertStatus = this.getChoices.results;  // 状态断言
    },
    methods: {
      submitForm() {
        this.$myTool.submitForm(this);
      },

      // get回将要编辑的数据
      getEditData() {
        this.$myTool.getEditData(this);
      },


      // 用例信息
      getCasesInfo(query) {
        this.$myTool.getObjList(this, this.$http.casesURL, this.cases_info, query)
      },
      // 表对象
      getContentTypeInfo(query) {
        this.$myTool.getObjList(this, this.$http.contentTypeURL, this.content_type_info, query)
      },

      // 表数据对象
      getObjectInfo(query) {
        this.object_info.splice(0, this.object_info.length);
        this.optionsObjectId.splice(0, this.optionsObjectId.length);
        this.$myTool.getObjList(this, this.OBJ_URL, this.object_info, query)
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
    // 监听
    watch: {
      'ruleForm.cases_info': function (value) {
        if (value) {
          this.optionsCasesId.push(value.id);
          this.cases_info.push(value);
        } else {
          this.optionsCasesId = [];
          this.cases_info = [];
        }
      },

      'ruleForm.content_type_info': function (value) {
        if (value) {
          this.optionsContentTypeId.push(value.id);
          this.content_type_info.push(value);
        } else {
          this.optionsContentTypeId = [];
          this.content_type_info = [];
        }
      },

      'ruleForm.content_object_info': function (value) {
        if (value) {
          this.optionsObjectId.push(value.id);
          this.object_info.push(value);
        } else {
          this.optionsObjectId = [];
          this.object_info = [];
        }
      },
      optionsCasesId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.cases = value[0];
      },
      optionsContentTypeId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.content_type = value[0];
        this.OBJ_URL = '';
        // this.optionsObjectId = [];
        // this.object_info = [];
        if (this.ruleForm.content_type) {
          this.$http.getApiFunc(this.$http.getApiStatus)(this.$http.contentTypeObjectURL, {'id': this.ruleForm.content_type})
            .then(res => {
              let data = res.data;
              if (data.status) {
                this.$alert(data.msg, '提示', {
                  confirmButtonText: '确定'
                });
              } else {
                this.OBJ_URL = data.data;
                this.is_show = false;
              }
            })
            .catch(err => {
              console.log(err)
            })
        }

      },

      optionsObjectId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.object_id = value[0]
      },
    },
    // 计算属性
    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      }
    },

  }
</script>


